<template>
  <div class="common-layout">
    <el-container class="box">
      <el-header class="header">
        <div class="header-left">
          <h1 class="logo">
            <img src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg" alt="">
            <img class="collect" :src="logo" alt="">
          </h1>
          <Header></Header>
        </div>
        <AnmBanner :text="'请先同意用户协议'" :width="'220px'" :height="'35px'" :background="'#FF5448'" :color="'#fff'"
          :top="'65px'" :right="'20px'" :position="'absolute'" :fontSize="'14px'" :borderradius="'5px'"
          :triangleborder="'8px solid'" :trianglebordercolor="'transparent transparent orangered transparent'"
          :triangletop="'-15px'" :triangleright="'23px'" v-if="isShow">
          <template #bannertext>
            注册领精美模板 + 200元优惠券
          </template>
        </AnmBanner>
        <div class="header-right">
        <Search style="margin-right: 18%;" :min='350' :max="500" :w="50"></Search>
          <Registration :LogClick="LogClick" :LogType="LogType" :IsLoginShow="IsLoginShow" :loginlist="loginlist"  :registration="registration" :imgs="imgs" :imglist="imglist"></Registration>
          <MyLogin v-if="IsLoginShow" :LogType="LogType" @LogClick="LogClick"></MyLogin>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="box_aside">
            <MyMenu :routerList="routerList"></MyMenu>
          </div>
        </el-aside>
        <el-main>
          <div class="box_mian" ref="box_mian">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <div class="registration" ref="registration" @mouseleave="listimg()">
      <userIndex ></userIndex>
    </div>
  </div>
  <RightSide :ce="ce" @fTop="fTop"></RightSide>
</template>
<script setup lang="ts">
import logo from '@/assets/logo.png';
import MyMenu from '@/components/MenuList/index.vue';
import { useRouter, useRoute } from 'vue-router';
import { reactive, ref, watch, onMounted } from 'vue';
import Header from '../../components/Header/index.vue';

import {SetTime} from '../../utils/Settime';
import Search from '@/components/Search/index.vue';
import AnmBanner from '@/components/Anmbanner/AnmBanner.vue';
import RightSide from '@/components/RightSide/index.vue';
import Registration from '../../components/Registration/index.vue';

import userIndex from '../../components/userIndex/index.vue';
import MyLogin from '@/components/Login/MyLogin.vue';
import { useCounterStore } from '@/stores/counter';
const loginlist = ref('登录');
// let user = counterStore.increment();
const box_mian = ref();
// const user = ref();
const registration = ref();
// const loginlist = ref('登录');
//     watch(loginlist, () => {
//       const obj = JSON.parse(localStorage.getItem('userinfo') as string);
//       if (obj) {
//         user = obj;
//         console.log(user,'0000000000000>');
//         loginlist.value = '工作台';
//       } else {
//         loginlist.value;
//       }
//     }, { immediate: true, deep: true });

const imgs = () => {
  registration.value.style = `display:block;`;
};
const imglist = () => {
  registration.value.style = `display:none;`;
};
const listimg = () => {
  registration.value.style = `display:none;`;
};

const router = useRouter();
const routerList = router.getRoutes().filter((v) => v.meta.isShow);
const href = router.resolve({
  name: 'Index',
  path: '/'
});

const xian = ref(false);
const ce = ref(false);
//判断token过期显示遮罩层
onMounted(async () => {
  const text = localStorage.getItem('text');
  if (text) {
    await SetTime(1000);
    LogType.value = '登录';
    IsLoginShow.value = true;
  } else {
    IsLoginShow.value = false;
  }


  window.onscroll = (e: any) => {
    let scrollTop = document.documentElement.scrollTop;//滚动高度
    // let clientHeight = document.documentElement.clientHeight;//可视高度
    // let scrollHeight = document.documentElement.scrollHeight;//内容高度
    // console.log(scrollTop);
    if (scrollTop >= 100) {
      xian.value = true;
      ce.value = true;
    } else {
      xian.value = false;
      ce.value = false;
    }
  };
});
// 向上滚动
const fTop = (value: any) => {
  if (value) {
    scrollToTop();
  }
};
function scrollToTop() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, scrollTop - scrollTop / 20); // 调整除数的值，可控制滚动速度
  }
}


const IsLoginShow = ref(false);
const LogType = ref('');
const LogClick = (tpye: string | any) => {
  switch (tpye) {
    case '登录':
      LogType.value = '登录';
      IsLoginShow.value = true;
      break;
    case '注册':
      LogType.value = '注册';
      IsLoginShow.value = true;
      break;
    case '关闭':
      IsLoginShow.value = false;
      break;
    default:
      break;
  }
};

const isShow = ref(true);
const panDuan = () => {
  const login = localStorage.getItem('token') || null;
  if (login) {
    isShow.value = false;
  } else {
    isShow.value = true;
  }
};
panDuan();

</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fcfcfc;
}

h4 {
  width: 100%;
  float: left;
  font-size: 13px;
  text-align: center;
  color: #fff;
  margin-top: 3px;
}

.image {
  width: 70px;
  height: 70px;
  float: left;
  margin-left: 33%;
  margin-top: 10px;
}

.qq {
  float: left;
  margin-top: 70px;
  margin-left: 50px;
  font-size: 13px;
  color: #ccc;
}


.header {
  width: 100%;
  box-shadow: 0 3px 5px 1px #f0f0f0;
  margin-bottom: 10px;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  height: 60px;
  z-index: 9999999999999999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fcfcfc;


  .header-left {
    // width: 40%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;

    .logo {
      cursor: pointer;
      max-width: 168px;
      min-width: 132px;
      margin-right: 36px;

      .collect {
        width: 280px;
        position: absolute;
        top: 0;
        left: 0px;
        display: none;
      }
    }

    .logo:hover .collect {
      display: block;
    }

    ul {
      margin-left: 50px;
      display: flex;
      align-items: center;
      position: relative;
    }



    .collect {
      width: 280px;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
  }

  .header-right {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-left: 10%;

    .el-button {
      width: 80px !important;
      height: 36px !important;
      display: flex;
    }
  }
}

.header>ul>li {
  width: 80px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  cursor: pointer;
}

.header>ul>li:hover {
  color: #1261ff;
}

.index {
  cursor: pointer;
}

.imgs {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative;
}

.registration {
  width: 270px;
  height: 600px;
  background-color: #fff;
  box-shadow: 1px 1px 2px #000;
  position: absolute;
  right: 5px;
  top: 60px;
  border-radius: 15px;
  display: none;
  z-index: 9999;
}

.registration-top {
  width: 100%;
  height: 70px;
  // background-color: red;
}

.registration-top p {
  width: 200px;
  float: left;
  margin-top: 15px;
  color: #ccc;
  font-size: 14px;
  margin-left: 20px;
}

.registration-top p:hover {
  color: #1261ff;
  cursor: pointer;
}

.registration-top h5 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.registration-top span {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}

.registration-main {
  width: 100%;
  height: 260px;
  background-color: #DBE9F9;
  border-radius: 0 0 55px 55px;
}

.registration-main h3 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.registration-main span {
  width: 80px;
  height: 30px;
  background-color: #F6CB93;
  float: right;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
  border-radius: 10px;
  margin-right: 10px;
}

.custom {
  width: 100%;
  height: 3px;
  background-color: #fff;
  float: left;
  margin-top: 20px;
}

.custom-yuan {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #C0D1E7;
  float: left;
  margin-left: 35px;
}

.custom-yuan:hover {
  background-color: #1261ff;
  cursor: pointer;
}

.consult {
  width: 60px;
  height: 30px;
  background-color: #1261ff;
  float: right;
  margin-top: 20px;
  text-align: center;
  line-height: 30px;
  border-radius: 13px;
  color: #fff;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.counselor {
  width: 200px;
  height: 240px;
  background-color: #fff;
  box-shadow: 2px 2px 4px #000;
  position: absolute;
  left: -20px;
  top: 90px;
  border-radius: 20px;
  display: none;
}

.counselor-main {
  width: 100%;
  height: 120px;
  background-color: #1261ff;
  float: left;
  border-radius: 20px 20px 30px 30px;
}

.images {
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 50%;
  margin-left: 37%;
  margin-top: 10px;
  display: none;
  z-index: 9999;
}

.box_aside {
  width: 200px;
  position: fixed;
  top: 60px;
  left: 0;
  padding: 20px 0;
  // margin-top: 20px;
  overflow: auto;
  height: calc(100% - 60px);
  box-sizing: border-box;
  z-index: 9999999;
  // background: #fff;
}

.box_aside::-webkit-scrollbar {
  display: none;
}

.box_mian {
  padding: 0;
  width: calc(100vw - 300px);
  max-width: 1704px;
  min-width: 1080px;
  margin: 60px auto;
}

// .el-main {
//   position: relative;
//   height: calc(100vh - 70px);
//   max-width: 1550px;
//   min-width: 1250px;
//   top: -60px;
//   left: calc(50% - 90px);
//   transform: translateX(-50%);
//   padding: 70px 0 0 0;
//   background: #fff;
// }
</style>
